iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 28
0
自我挑戰組

從JS到React的前端入門實作系列 第 28

Day28:拆解組件(8),新增刪除功能(下)

  • 分享至 

  • xImage
  •  

今天目的

今天要刪除功能實踐,廢話不多說直接開始。/images/emoticon/emoticon08.gif

Todolist.js 函數 handleClick改寫

新增this.props.onItemClick把ID傳給父組件統一處理。

  handleClick = (e) => {
    console.log(e.target.id); //抓到btn當前ID
   //實際上呼叫的是由上層元件從props.onItemClick傳入的方法(上層元件的方法)
   this.props.onItemClick(e.target.id);//傳給父組件處理拿到要刪除的索引值
}

App.js 畫面部分

把昨天單獨拿出來的地方,現在合併起來了。

  render() {
    const {searhItem,handleContent,addItem,deleteItem} = this,
    {content,item} = this.state;

    
    return(
      <div>
        <label>文字輸入</label>
        <input type="text" 
          placeholder="addItem..."
          value={content}  
          onChange={handleContent}
           />
            <button onClick={addItem}>addItem</button> 
        <br/>
       <Searchbar  onsearh ={searhItem}/> {/* 從子組件 接收onsearh事件 */}
       <Todolist item={item} onItemClick={deleteItem} />
      </div>
    );
  }
}

deleteItem函數

這個k,是從Todolist.js的handleClick函數傳裡的ID,我們把ID抓取後拿來山陣列資料,
這樣就可以實現刪除功能。

  deleteItem = (k) =>{ //傳進當前按鈕按下後的索引值
    console.log('k',this.state.item[k]); //拿到陣列的值
    // delete this.state.item[k];
    this.state.item.splice(k, 1);// 刪除1筆 資料 splice(當前索引,刪幾筆)
    console.log('刪除陣列裡當前索引值的資料',this.state.item);
    this.setState({
      item:this.state.item,//改變陣列
      searhitem:this.state.item
    })
  }

呈現結果

https://ithelp.ithome.com.tw/upload/images/20191010/20115505B4RZ1HooJw.png
https://ithelp.ithome.com.tw/upload/images/20191010/20115505jpHhLQduWC.png


參考資料:自己


上一篇
Day27:拆解組件(7),新增刪除功能(上)
下一篇
Day29:組件的生命週期
系列文
從JS到React的前端入門實作30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言